<template>
  <div class="home-box">
    <!-- 顶部导航 -->
    <van-nav-bar fixed class="page-nav-bar">
       <template #title>
        <van-button to="/search" icon="search" class="search-btn" type="primary">搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- 滑动导航 -->
    <van-tabs v-model="active" animated swipeable>
      <van-tab v-for="item in channelsData" :key="item.id" :title="item.name">
        <article-list :sendData="item"></article-list>
      </van-tab>
      <div slot="nav-right" class="flexs"></div>
      <div slot="nav-right" class="right-btn" @click="editChannelFlag = true">
        <i class="toutiao toutiao-gengduo"></i>
      </div>
    </van-tabs>
    <!-- 弹层 -->
    <van-popup v-model="editChannelFlag" closeable close-icon-position="top-left" position="bottom" :style="{ height: '75%' }">
      <edit-popup :closePopup="editChannelFlag" @updata_active="updataActive" :editChannelData="channelsData" :active="active"></edit-popup>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
import ArticleList from './components/article-list'
import EditPopup from './components/edit-popup'
import { getItem } from '@/utils/storage'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      channelsData: [],
      editChannelFlag: false
    }
  },

  created () {
    this.loadUserChannels()
  },

  computed: {
    ...mapState(['user'])
  },
  components: {
    ArticleList,
    EditPopup
  },

  methods: {
    async loadUserChannels () {
      try {
        const loaclData = getItem('UNTOKEN_LOCALDATA')
        // 当本地有数据且未登录使用本地数据
        if (loaclData && !this.user) {
          console.log(loaclData)
          this.channelsData = loaclData
          return
        }
        // 否则发送请求
        const { data: res } = await getUserChannels()
        console.log(res)
        this.channelsData = res.data.channels
      } catch (e) {
        this.$toast('获取失败')
      }
    },

    updataActive (i, flag) {
      this.active = i
      this.editChannelFlag = flag
    }
  }
}
</script>

<style scoped lang='less'>
.home-box {
  margin-bottom: 100px;
  padding-top: 174px;
}
.page-nav-bar {
  /deep/.van-nav-bar__title {
    max-width: unset;
    color: #fff;
  }
}
.search-btn {
  width: 555px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  border: none;
  .van-icon {
    color: #fff;
  }
}
/deep/.van-tabs__wrap {
    position: fixed;
    top: 92px;
    z-index: 333;
    width: 100%;
    border-bottom: 1px solid red;
  }

/deep/.van-tabs {
  .van-tabs__nav {
    height: 82px;
    padding-bottom: 0px;
  }
  .van-tab {
    width: 191px;
    height: 82px;
    border-right: 1px solid #EDEFF3;
    // border-right: 1px solid #666;
  }
  .van-tabs__line {
    width: 31px;
    height: 6px;
    background: #3296FA;
    border-radius: 3px;
    bottom: 8px;
  }
}
.flexs{
  flex-shrink: 0;
  width: 80px;
}
.right-btn {
  &::before {
    content:'';
    position: absolute;
    width: 2px;
    height: 82px;
    left: 0;
    top: 0;
    background: url(~@/assets/a1.png);
    background-size: contain;
  }
  width: 80px;
  position: fixed;
  right: 0;
  height: 82px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  .toutiao {
    font-size: 33px;
  }
}
</style>
